import { useEffect, useState } from 'react';
import { Form, Input, Select, TreeSelect, InputNumber, Switch } from 'antd';
import { getElements } from '@/api/element';
import { selectByCode } from '@/api/dictEnums';
import IconSelector from '@/components/common/IconSelector';

const { Option } = Select;
const { TextArea } = Input;

const ElementForm = ({ form, isEditing,isAddChild }) => {
  const [treeData, setTreeData] = useState([]);
  const [typeOptions, setTypeOptions] = useState([]);

  const defaultProps = {
    label: "title",
    children: "children",
    value: "elementId"
  };

  const pathProps = {
    label: "title",
    children: "children",
    value: "path"
  };

  useEffect(() => {
    loadElementType();
    loadTreeData();
  }, []);

  const loadTreeData= () => {
      getElements({type:"0"}).then(res => {
        setTreeData(res.data || []);
      });
  };

  const loadElementType = () =>{
    selectByCode({dictCode:"elementType"}).then(res => {
      setTypeOptions(res.data.values || [])
    });
  }

  return (
    <Form
      name="element"
      form={form}
      layout="vertical"
      initialValues={{
        isAffix: false,
        type: "0",
        orderNum: 1,
        isPage:true,
        isComponent:true
      }}
    >
      <Form.Item name="elementId" hidden>
        <Input />
      </Form.Item>
      
      <Form.Item
        name="type"
        label="元素类型"
        rules={[{ required: true, message: '请选择元素类型' }]}
      >
        <Select 
          placeholder="请选择元素类型"
          disabled={isEditing}
        >
          {typeOptions.map(item => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}
      >
        {({ getFieldValue }) => {
          const type = getFieldValue('type');
          return type === '1' ? (
            <Form.Item
              name="code"
              label="按钮编码"
              rules={[{ required: true, message: '请输入按钮唯一编码' }]}
            >
              <Input placeholder="请输入按钮唯一编码" />
            </Form.Item>
          ) : null;
        }}
      </Form.Item>

      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}
      >
        {({ getFieldValue }) => {
          const type = getFieldValue('type');
          return (
            <Form.Item
              name="title"
              label={type === '1' ? '按钮标题' : '菜单标题'}
              rules={[{ required: true, message: `请输入${type === '1' ? '按钮' : '菜单'}标题` }]}
            >
              <Input placeholder={`请输入${type === '1' ? '按钮' : '菜单'}标题`} />
            </Form.Item>
          );
        }}
      </Form.Item>

      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => 
          prevValues.type !== currentValues.type || 
          prevValues.parentId !== currentValues.parentId
        }
      >
        {({ getFieldValue }) => {
          const type = getFieldValue('type');
          const parentId = getFieldValue('parentId');
          return ((!isEditing && type !== undefined) || (isEditing && parentId != null && parentId !== '')) ? (
            <Form.Item
              name="parentId"
              label="上级菜单"
            >
              <TreeSelect
                disabled={isEditing||isAddChild}
                treeData={treeData}
                fieldNames={defaultProps}
                placeholder="请选择上级菜单"
              />
            </Form.Item>
          ) : null;
        }}
      </Form.Item>

      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}
      >
        {({ getFieldValue }) => {
          const type = getFieldValue('type');
          return type === '0' ? (
            <>
              <Form.Item
                name="name"
                label="元素名称"
                rules={[{ required: true, message: '请输入元素名称' }]}
              >
                <Input placeholder="请输入元素名称" />
              </Form.Item>

              <Form.Item
                name="path"
                label="菜单路径"
                rules={[{ required: true, message: '请输入菜单路径' }]}
              >
                <Input placeholder="请输入菜单路径" />
              </Form.Item>

              <Form.Item
                name="icon"
                label="菜单图标"
                rules={[{ required: true, message: '请选择菜单图标' }]}
              >
                <IconSelector />
              </Form.Item>

              <Form.Item
                name="orderNum"
                label="排序"
              >
                <InputNumber min={1} max={10} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                name="isPage"
                label="真实页面"
              >
                <Select>
                  <Option value={true}>是</Option>
                  <Option value={false}>否</Option>
                </Select>
              </Form.Item>

              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) => 
                  prevValues.isPage !== currentValues.isPage
                }
              >
                {({ getFieldValue }) => {
                  const isPage = getFieldValue('isPage');
                  return isPage ? (
                    <>
                      <Form.Item
                        name="isComponent"
                        label="外链/组件"
                      >
                        <Select>
                          <Option value={true}>组件</Option>
                          <Option value={false}>外链</Option>
                        </Select>
                      </Form.Item>
                      <Form.Item
                        noStyle shouldUpdate={(prevValues, currentValues) => 
                        prevValues.isComponent !== currentValues.isComponent
                      }>
                        {({ getFieldValue }) => {
                          const isComponent = getFieldValue('isComponent');
                          return isComponent?(
                            <Form.Item
                              name="component"
                              label="组件位置"
                              rules={[{ required: true, message: '请输入组件位置' }]}
                            >
                              <Input placeholder="请输入组件位置" />
                            </Form.Item>
                          ):(
                            <Form.Item
                              name="isLink"
                              label="外链地址"
                              rules={[{ required: true, message: '请输入外链地址' }]}
                            >
                              <Input placeholder="请输入外链地址" />
                            </Form.Item>
                          );
                        }}
                      </Form.Item>
                      <Form.Item
                        name="isAffix"
                        label="固定在标签页"
                      >
                        <Switch />
                      </Form.Item>
                    </>
                  ) : (
                    <Form.Item
                      name="redirect"
                      label="重定向"
                      rules={[{ required: true, message: '请选择重定向路径' }]}
                    >
                      <TreeSelect
                        treeData={treeData}
                        fieldNames={pathProps}
                        placeholder="请选择重定向路径"
                      />
                    </Form.Item>
                  );
                }}
              </Form.Item>
              
              <Form.Item
                name="remark"
                label="备注"
              >
                <TextArea rows={2} maxLength={255} placeholder="请输入备注" />
              </Form.Item>
            </>
          ) : (
            <Form.Item
              name="remark"
              label="备注"
            >
              <TextArea rows={2} maxLength={255} placeholder="请输入备注" />
            </Form.Item>
          );
        }}
      </Form.Item>
    </Form>
  );
};

export default ElementForm;